<template>
  <div class="wrapper">
      <div 
        v-magnifier
        class="img-wrap"
        :style="{
            width:imgWidth + 'px',
            height:imgHeight + 'px'}">
        <a 
            class="mag-wrap" 
            :href="link" 
            :target="blank ? '_bank' : ''"
            :style="{
                width:magWidth + 'px',
                height:magHeight + 'px'
            }">
            <img 
                class="mag-img"
                :src="imgUrl" 
                :alt="imgAlt"  
                :style="{
                    width:imgWidth + 'px',
                    height:imgHeight + 'px'}"
            />
        </a>
        <a
            class="img-lk"
            :href="link">
            <img 
                class="static-img"
                :src="imgUrl" 
                :alt="imgAlt"  
            />
        </a>
      </div>
  </div>

</template>

<script>
import { toRefs } from '@vue/reactivity'
import magnifier from './directives/magnifier.js'
export default {
    name:'Magnifier',
    directives:{
        magnifier
    },
    props:{
        imgOptions:{
            type:Object,
            default:{}
        }
    },
    setup(props){
        console.log(props.imgOptions);
        return {
            ...toRefs(props.imgOptions)
        }  
    }

}
</script>

<style lang="less" scoped>
.wrapper{
    width: 200px;  // 高 300
    margin: 100px auto;
    .img-wrap{
        position: relative;
        border: 1px solid #ddd;
        box-shadow: 0 0 5px #999;
        .static-img{
            width: 100%
        }
        .mag-wrap{
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 99;
            box-shadow: 0 0 3px #999;
            border-radius: 50%;
            // background: #fff;
            border: 1px solid #999;
            cursor: move;
            overflow: hidden;
            &.show{
                display: block;
                // transform: scale(1.5);
            }
        }
        .mag-img{
            position: absolute;
            top: 0;
            left: 0;
            transform: scale(1.5);
        }

    }
}
</style>